<template>
  <div class="fire-area">
    <div class="title"></div>
    <div class="data"></div>

    <div class="summary-text">火灾总数（起）：17936</div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent } from 'vue';

defineComponent({ name: 'FireAreaComp' });
</script>

<style scoped lang="scss">
.fire-area {
  @apply relative w-full h-full;

  .title {
    @apply w-full h-[31px];
    background: url('./assets/title.png') no-repeat center;
  }

  .data {
    @apply w-full h-[250px] mx-auto mt-[78px];
    background: url('./assets/data-bg.png') no-repeat center;
  }

  .summary-text {
    @apply absolute top-0 right-0 text-[16px] text-[#B2E1FF];
    font-family: Alibaba PuHuiTi;
  }
}
</style>
